<template>
  <div class="mini-chart">
    <div class="chart-content" :style="{height: 46}">
      <v-chart :force-fit="true" :height="height" :data="data" :padding="[36, 5, 18, 5]">
        <v-tooltip></v-tooltip>
        <v-bar position="x*y"></v-bar>
      </v-chart>
    </div>
  </div>
</template>

<script lang="es6">
  const cmp = new Promise((resolve, reject) => {
    require([
      'date-fns'
    ], function(DateFns) {
      const format = DateFns.format;
      const data = [];
      const beginDay = new Date().getTime();

      const fakeY = [7, 5, 4, 2, 4, 7, 5, 6, 5, 9, 6, 3, 1, 5, 3, 6, 5];
      for (let i = 0; i < fakeY.length; i += 1) {
        data.push({
          x: format(new Date(beginDay + 1000 * 60 * 60 * 24 * i), 'YYYY-MM-DD'),
          y: fakeY[i]
        })
      }

      const tooltip = [
        'x*y',
        (x, y) => ({
          name: x,
          value: y
        })
      ];

      const scale = [{
        dataKey: 'x',
        min: 2
      }, {
        dataKey: 'y',
        title: '时间',
        min: 1,
        max: 22
      }];
      
      resolve({
        name: 'MiniBar',
        data () {
          return {
            data,
            scale,
            tooltip,
            height: 100
          }
        }
      });
    });
  });

  module.exports = cmp;
</script>

<style scoped>
  .mini-chart {
    position: relative;
    width: 100%;
  }
  .mini-chart .chart-content {
    position: absolute;
    bottom: -28px;
    width: 100%;
  }
</style>
